<template>
    <div>
        <div>
            姓: <input v-model="firstName" type="text">
        </div>
        <div>
            名: <input v-model="lastName" type="text">
        </div>
        <div>
            <button @click="changeName">更改名称</button>
        </div>
        <div>
            全名： {{name}}
        </div>
    </div>

</template>

<script setup lang="ts">
    import {ref, computed} from 'vue'
    let firstName = ref("张")
    let lastName = ref("三")
    let name = computed<string>({
        get() {
            return firstName.value + '-' + lastName.value
        },
        set(newVal) {
            [firstName.value, lastName.value] = newVal.split("-")

        }
    })
    const changeName = ()=> {
        name.value="小-慢"
        console.log("小-曼")
    }


</script>
